<!DOCTYPE HTML>
<html>

<head>
	<link rel="bookmark"  type="image/x-icon"  href="/img/logo_miccall.png"/>
	<link rel="shortcut icon" href="/img/logo_miccall.png">
	
			    <title>
    Ame雨
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/amelin-ting/css/mic_main.css" />
    <link rel="stylesheet" href="/amelin-ting/css/dropdownMenu.css" />
    <meta name="keywords" content="Ame雨" />
    
    	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
	 
    <noscript>
        <link rel="stylesheet" href="/amelin-ting/css/noscript.css" />
    </noscript>
    <style type="text/css">
        body:before {
          content: ' ';
          position: fixed;
          top: 0;
          background: url('/amelin-ting/img/bg.jpg') center 0 no-repeat;
          right: 0;
          bottom: 0;
          left: 0;
          background-size: cover; 
        }
    </style>

			    
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


    <script src="/amelin-ting/js/jquery.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrollex.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrolly.min.js"></script>
    <script src="/amelin-ting/js/skel.min.js"></script>
    <script src="/amelin-ting/js/util.js"></script>
    <script src="/amelin-ting/js/main.js"></script>
	
<meta name="generator" content="Hexo 5.4.0"></head>
    
		
<!-- Layouts -->



<!--  代码渲染  -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
    <!-- Wrapper 外包 s-->
    <div id="wrapper" class="fade-in">
        <!-- Intro 头部显示 s -->
        <!-- Intro 头部显示 e -->
        <!-- Header 头部logo start -->
        <header id="header">
    <a href="/amelin-ting/" class="logo">Art Space</a>
</header>
        <!-- Nav 导航条 start -->
        <nav id="nav" class="special" >
            <ul class="menu links" >
			<!-- Homepage  主页  --> 
			<li >
	            <a href="/amelin-ting/" rel="nofollow">主页</a>
	        </li>
			<!-- categories_name  分类   --> 
	        
	        <li class="active">
	            <a href="#s1">分类</a>
	                    <ul class="submenu">
	                        <li>
	                        <a class="category-link" href="/amelin-ting/categories/Go/">Go</a></li><li><a class="category-link" href="/amelin-ting/categories/django/">django</a></li><li><a class="category-link" href="/amelin-ting/categories/drf/">drf</a></li><li><a class="category-link" href="/amelin-ting/categories/gin/">gin</a></li><li><a class="category-link" href="/amelin-ting/categories/go/">go</a></li><li><a class="category-link" href="/amelin-ting/categories/linux/">linux</a></li><li><a class="category-link" href="/amelin-ting/categories/mysql/">mysql</a></li><li><a class="category-link" href="/amelin-ting/categories/python/">python</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/">内网穿透</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%89%8D%E7%AB%AF/">前端</a>
	                    </ul>
	        </li>
	        
	        <!-- archives  归档   --> 
	        
	        
		        <!-- Pages 自定义   -->
		        
		        <li>
		            <a href="/about/" title="简历">
		                简历
		            </a>
		        </li>
		        
		        <li>
		            <a href="/group/" title="团队">
		                团队
		            </a>
		        </li>
		        
		        <li>
		            <a href="/gallery/" title="图库">
		                图库
		            </a>
		        </li>
		        
		        <li>
		            <a href="/tag/" title="标签">
		                标签
		            </a>
		        </li>
		        


            </ul>
            <!-- icons 图标   -->
			<ul class="icons">
                    
                    <li>
                        <a title="github" href="https://github.com/miccall" target="_blank" rel="noopener">
                            <i class="icon fa fa-github"></i>
                        </a>
                    </li>
                    
                    <li>
                        <a title="500px" href="http://500px.com" target="_blank" rel="noopener">
                            <i class="icon fa fa-500px"></i>
                        </a>
                    </li>
                    
			</ul>
</nav>

        <div id="main" >
            <div class ="post_page_title_img" style="height: 25rem;background-image: url(https://img0.baidu.com/it/u=3608020578,571175966&amp;fm=26&amp;fmt=auto);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
                <a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >前端框架Bootstrap</h2></a>
            </div>
            <!-- Post -->
            <div class="typo" style="padding: 3rem;">
                <h2 id="一、简介"><a href="#一、简介" class="headerlink" title="一、简介"></a>一、简介</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可</span><br><span class="line">在使用Bootstrap的时候所有的页面样式都只需要你通过<span class="class"><span class="keyword">class</span>来调节即可</span></span><br><span class="line"><span class="class">版本选择建议使用<span class="title">v3</span>版本：&lt;<span class="title">https</span>:</span>//v3.bootcss.com/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment"># 注意</span></span><br><span class="line">**bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery**</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h2 id="二、布局容器"><a href="#二、布局容器" class="headerlink" title="二、布局容器"></a>二、布局容器</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span>=&quot;<span class="title">container</span>&quot;&gt;</span></span><br><span class="line"><span class="class">    	左右两侧有留白</span></span><br><span class="line"><span class="class">&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">class</span>=&quot;<span class="title">container</span>-<span class="title">fluid</span>&quot;&gt;</span></span><br><span class="line"><span class="class">			左右两侧没有留白</span></span><br><span class="line"><span class="class">&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class"># 后续在使用<span class="title">bootstrap</span>做页面的时候 上来先写一个<span class="title">div</span> <span class="title">class</span>=<span class="title">container</span>,之后在<span class="title">div</span>内部书写页面</span></span><br></pre></td></tr></table></figure>

<h2 id="三、栅格系统"><a href="#三、栅格系统" class="headerlink" title="三、栅格系统"></a>三、栅格系统</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span>=&quot;<span class="title">row</span>&quot;&gt;&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">写一个<span class="title">row</span>就是将所在的区域划分成12份</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">class</span>=&quot;<span class="title">col</span>-<span class="title">md</span>-6 &quot;&gt;  获取你所要的份数</span></span><br><span class="line"><span class="class"># 在使用<span class="title">bootstrap</span>的时候 脑子里面一定要做12的加减法</span></span><br></pre></td></tr></table></figure>

<h2 id="四、栅格参数"><a href="#四、栅格参数" class="headerlink" title="四、栅格参数"></a>四、栅格参数</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.col-xs-	.col-sm-	.col-md-	.col-lg-</span><br><span class="line"><span class="comment"># 针对不同的显示器 bootstrap会自动选择对应的参数</span></span><br><span class="line"><span class="comment"># 如果你想要兼容所有的显示器 你就全部加上即可</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># 在一行如何移动位置</span></span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span>=&quot;<span class="title">col</span>-<span class="title">md</span>-8 <span class="title">c1</span> <span class="title">col</span>-<span class="title">md</span>-<span class="title">offset</span>-2&quot;&gt;&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="五、排版"><a href="#五、排版" class="headerlink" title="五、排版"></a>五、排版</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式</span><br><span class="line"></span><br><span class="line">效果一样，但是标签表达的意思不一样（语义）</span><br></pre></td></tr></table></figure>

<h2 id="六、表格"><a href="#六、表格" class="headerlink" title="六、表格"></a>六、表格</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;table <span class="class"><span class="keyword">class</span>=&quot;<span class="title">table</span> <span class="title">table</span>-<span class="title">hover</span> <span class="title">table</span>-<span class="title">striped</span> <span class="title">table</span>-<span class="title">bordered</span>&quot;&gt;</span></span><br><span class="line"><span class="class">		</span></span><br><span class="line"><span class="class">&lt;<span class="title">tr</span> <span class="title">class</span>=&quot;<span class="title">success</span>&quot;&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">td</span>&gt;1&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">td</span>&gt;<span class="title">jason</span>&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">td</span>&gt;123&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">td</span>&gt;<span class="title">study</span>&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line"><span class="class">&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class">&lt;<span class="title">tr</span> <span class="title">class</span>=&quot;<span class="title">active</span>&quot;&gt;...&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">tr</span> <span class="title">class</span>=&quot;<span class="title">success</span>&quot;&gt;...&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">tr</span> <span class="title">class</span>=&quot;<span class="title">warning</span>&quot;&gt;...&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">tr</span> <span class="title">class</span>=&quot;<span class="title">danger</span>&quot;&gt;...&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">tr</span> <span class="title">class</span>=&quot;<span class="title">info</span>&quot;&gt;...&lt;/<span class="title">tr</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="七、表单"><a href="#七、表单" class="headerlink" title="七、表单"></a>七、表单</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span>=&quot;<span class="title">container</span>&quot;&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">div</span> <span class="title">class</span>=&quot;<span class="title">col</span>-<span class="title">md</span>-8 <span class="title">col</span>-<span class="title">md</span>-<span class="title">offset</span>-2&quot;&gt;</span></span><br><span class="line"><span class="class">        &lt;<span class="title">h2</span> <span class="title">class</span>=&quot;<span class="title">text</span>-<span class="title">center</span>&quot;&gt;登陆页面&lt;/<span class="title">h2</span>&gt;</span></span><br><span class="line"><span class="class">        &lt;<span class="title">form</span> <span class="title">action</span>=&quot;&quot;&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">p</span>&gt;<span class="title">username</span>:</span>&lt;<span class="built_in">input</span> <span class="built_in">type</span>=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span>=&quot;<span class="title">form</span>-<span class="title">control</span>&quot;&gt;&lt;/<span class="title">p</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">p</span>&gt;<span class="title">password</span>:</span>&lt;<span class="built_in">input</span> <span class="built_in">type</span>=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span>=&quot;<span class="title">form</span>-<span class="title">control</span>&quot;&gt;&lt;/<span class="title">p</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">p</span>&gt;</span></span><br><span class="line"><span class="class">                &lt;<span class="title">select</span> <span class="title">name</span>=&quot;&quot; <span class="title">id</span>=&quot;&quot; <span class="title">class</span>=&quot;<span class="title">form</span>-<span class="title">control</span>&quot;&gt;</span></span><br><span class="line"><span class="class">                    &lt;<span class="title">option</span> <span class="title">value</span>=&quot;&quot;&gt;111&lt;/<span class="title">option</span>&gt;</span></span><br><span class="line"><span class="class">                    &lt;<span class="title">option</span> <span class="title">value</span>=&quot;&quot;&gt;222&lt;/<span class="title">option</span>&gt;</span></span><br><span class="line"><span class="class">                    &lt;<span class="title">option</span> <span class="title">value</span>=&quot;&quot;&gt;333&lt;/<span class="title">option</span>&gt;</span></span><br><span class="line"><span class="class">                &lt;/<span class="title">select</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;/<span class="title">p</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">textarea</span> <span class="title">name</span>=&quot;&quot; <span class="title">id</span>=&quot;&quot; <span class="title">cols</span>=&quot;30&quot; <span class="title">rows</span>=&quot;10&quot; <span class="title">class</span>=&quot;<span class="title">form</span>-<span class="title">control</span>&quot;&gt;&lt;/<span class="title">textarea</span>&gt;</span></span><br><span class="line"><span class="class">            &lt;<span class="title">input</span> <span class="title">type</span>=&quot;<span class="title">submit</span>&quot;&gt;</span></span><br><span class="line"><span class="class">        &lt;/<span class="title">form</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class"># 针对表单标签 加样式就用<span class="title">form</span>-<span class="title">control</span></span></span><br><span class="line"><span class="class">	<span class="title">class</span>=&quot;<span class="title">form</span>-<span class="title">control</span>&quot;</span></span><br><span class="line"><span class="class">&quot;&quot;&quot;</span></span><br><span class="line"><span class="class">&lt;<span class="title">input</span> <span class="title">type</span>=&quot;<span class="title">checkbox</span>&quot;&gt;222</span></span><br><span class="line"><span class="class">&lt;<span class="title">input</span> <span class="title">type</span>=&quot;<span class="title">radio</span>&quot;&gt;333</span></span><br><span class="line"><span class="class"><span class="title">checkbox</span>和<span class="title">radio</span>我们一般不会给它加<span class="title">form</span>-<span class="title">control</span>，直接使用原生的即可</span></span><br><span class="line"><span class="class">&quot;&quot;&quot;</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class"># 针对报错信息 可以加<span class="title">has</span>-<span class="title">error</span>（<span class="title">input</span>的父标签加）</span></span><br><span class="line"><span class="class">&lt;<span class="title">p</span> <span class="title">class</span>=&quot;<span class="title">has</span>-<span class="title">error</span>&quot;&gt;</span></span><br><span class="line"><span class="class">	<span class="title">username</span>:</span></span><br><span class="line">  &lt;<span class="built_in">input</span> <span class="built_in">type</span>=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span>=&quot;<span class="title">form</span>-<span class="title">control</span>&quot;&gt;</span></span><br><span class="line"><span class="class">&lt;/<span class="title">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="八、按钮"><a href="#八、按钮" class="headerlink" title="八、按钮"></a>八、按钮</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=<span class="string">&quot;https://www.mzitu.com/&quot;</span> <span class="class"><span class="keyword">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">primary</span>&quot;&gt;点我&lt;/<span class="title">a</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">danger</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">default</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">success</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">info</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">warning</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">warning</span> <span class="title">btn</span>-<span class="title">lg</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">warning</span> <span class="title">btn</span>-<span class="title">sm</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">button</span> <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">warning</span> <span class="title">btn</span>-<span class="title">xs</span>&quot;&gt;按我&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">input</span> <span class="title">type</span>=&quot;<span class="title">submit</span>&quot; <span class="title">class</span>=&quot;<span class="title">btn</span> <span class="title">btn</span>-<span class="title">primary</span> <span class="title">btn</span>-<span class="title">block</span>&quot;&gt;  </span></span><br><span class="line"><span class="class">通过给按钮添加 .<span class="title">btn</span>-<span class="title">block</span> 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（<span class="title">block</span>）元素。</span></span><br></pre></td></tr></table></figure>

<h2 id="九、图表"><a href="#九、图表" class="headerlink" title="九、图表"></a>九、图表</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;h2 <span class="class"><span class="keyword">class</span>=&quot;<span class="title">text</span>-<span class="title">center</span>&quot;&gt;登陆页面 &lt;<span class="title">span</span> <span class="title">class</span>=&quot;<span class="title">glyphicon</span> <span class="title">glyphicon</span>-<span class="title">user</span>&quot;&gt;&lt;/<span class="title">span</span>&gt;&lt;/<span class="title">h2</span>&gt;</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class">    &lt;<span class="title">style</span>&gt;</span></span><br><span class="line"><span class="class">        <span class="title">span</span> &#123;</span></span><br><span class="line"><span class="class">            <span class="title">color</span>:</span> greenyellow;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment"># 扩展</span></span><br></pre></td></tr></table></figure>

<h2 id="十、导航条"><a href="#十、导航条" class="headerlink" title="十、导航条"></a>十、导航条</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;nav <span class="class"><span class="keyword">class</span>=&quot;<span class="title">navbar</span> <span class="title">navbar</span>-<span class="title">inverse</span>&quot;&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">nav</span> <span class="title">class</span>=&quot;<span class="title">navbar</span> <span class="title">navbar</span>-<span class="title">default</span>&quot;&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="十一、分页器"><a href="#十一、分页器" class="headerlink" title="十一、分页器"></a>十一、分页器</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;nav aria-label=<span class="string">&quot;Page navigation&quot;</span>&gt;</span><br><span class="line">  &lt;ul <span class="class"><span class="keyword">class</span>=&quot;<span class="title">pagination</span>&quot;&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">      &lt;<span class="title">a</span> <span class="title">href</span>=&quot;#&quot; <span class="title">aria</span>-<span class="title">label</span>=&quot;<span class="title">Previous</span>&quot;&gt;</span></span><br><span class="line"><span class="class">        &lt;<span class="title">span</span> <span class="title">aria</span>-<span class="title">hidden</span>=&quot;<span class="title">true</span>&quot;&gt;&amp;<span class="title">laquo</span>;&lt;/<span class="title">span</span>&gt;</span></span><br><span class="line"><span class="class">      &lt;/<span class="title">a</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">li</span> <span class="title">class</span>=&quot;<span class="title">active</span>&quot;&gt;&lt;<span class="title">a</span> <span class="title">href</span>=&quot;#&quot;&gt;1&lt;/<span class="title">a</span>&gt;&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">li</span>&gt;&lt;<span class="title">a</span> <span class="title">href</span>=&quot;#&quot;&gt;2&lt;/<span class="title">a</span>&gt;&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">li</span>&gt;&lt;<span class="title">a</span> <span class="title">href</span>=&quot;#&quot;&gt;3&lt;/<span class="title">a</span>&gt;&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">li</span>&gt;&lt;<span class="title">a</span> <span class="title">href</span>=&quot;#&quot;&gt;4&lt;/<span class="title">a</span>&gt;&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">li</span>&gt;&lt;<span class="title">a</span> <span class="title">href</span>=&quot;#&quot;&gt;5&lt;/<span class="title">a</span>&gt;&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">      &lt;<span class="title">a</span> <span class="title">href</span>=&quot;#&quot; <span class="title">aria</span>-<span class="title">label</span>=&quot;<span class="title">Next</span>&quot;&gt;</span></span><br><span class="line"><span class="class">        &lt;<span class="title">span</span> <span class="title">aria</span>-<span class="title">hidden</span>=&quot;<span class="title">true</span>&quot;&gt;&amp;<span class="title">raquo</span>;&lt;/<span class="title">span</span>&gt;</span></span><br><span class="line"><span class="class">      &lt;/<span class="title">a</span>&gt;</span></span><br><span class="line"><span class="class">    &lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="class">  &lt;/<span class="title">ul</span>&gt;</span></span><br><span class="line"><span class="class">&lt;/<span class="title">nav</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="十二、弹框"><a href="#十二、弹框" class="headerlink" title="十二、弹框"></a>十二、弹框</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">https://lipis.github.io/bootstrap-sweetalert/</span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line">swal(<span class="string">&#x27;你还好吗?&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">swal(<span class="string">&#x27;你还好吗?&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">swal(<span class="string">&#x27;你还好吗?&#x27;</span>,<span class="string">&#x27;我不好，想你了!&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">swal(<span class="string">&#x27;你还好吗?&#x27;</span>,<span class="string">&#x27;我不好，想你了!&#x27;</span>,<span class="string">&#x27;success&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">swal(<span class="string">&#x27;你还好吗?&#x27;</span>,<span class="string">&#x27;我不好，想你了!&#x27;</span>,<span class="string">&#x27;warning&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">swal(<span class="string">&#x27;你还好吗?&#x27;</span>,<span class="string">&#x27;我不好，想你了!&#x27;</span>,<span class="string">&#x27;error&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">swal(<span class="string">&#x27;你还好吗?&#x27;</span>,<span class="string">&#x27;我不好，想你了!&#x27;</span>,<span class="string">&#x27;info&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line"><span class="comment"># 我们在后面的课程中 还会涉及到该部分内容</span></span><br></pre></td></tr></table></figure>


            </div>

            <!-- Post Comments -->
            
    <!-- 使用 DISQUS_CLICK -->
<div id="disqus-comment">
    <div id="disqus_thread"></div>

<!-- add animation -->
<style>
	.disqus_click_btn {
            line-height: 30px;
            margin: 0;
            min-width: 50px;
            padding: 0 14px;
            display: inline-block;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
            outline: 0;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
            border: 0;
            background: rgba(158, 158, 158, .2);
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
            color: #fff;
            background-color: #7EC0EE;
            text-shadow: 0
        }
</style>
	
<div class="btn_click_load" id="disqus_bt"> 
    <button class="disqus_click_btn">点击查看评论</button>
</div>

<!--
<script type="text/javascript">
$('.btn_click_load').click(function() {
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'http-miccall-tech'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

    document.getElementById('disqus_bt').style.display = "none";
});
</script>
-->
<script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://gitee.com/AmeX/amelin-ting.git/2017/10/02/%E5%89%8D%E7%AB%AF-------Bootstrap/';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'https://gitee.com/AmeX/amelin-ting.git/2017/10/02/%E5%89%8D%E7%AB%AF-------Bootstrap/'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
</script>

<script type="text/javascript">
    $('.btn_click_load').click(function() {  //click to load comments
        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document;
            var s = d.createElement('script');
            s.src = '//http-miccall-tech.disqus.com/embed.js';
            s.setAttribute('data-timestamp', + new Date());
            (d.head || d.body).appendChild(s);
        })();
        $('.btn_click_load').css('display','none');
    });
</script>
</div>
<style>
    #disqus-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>


        </div>
        <!-- Copyright 版权 start -->
                <div id="copyright">
            <ul>
                <li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
                <li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
            </ul>
            
                <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
			
        </div>
    </div>
</body>



 	
</html>
